<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../dist/xl.js"></script>
</head>
<style>
    body {
        font-family: "Helvetic Neue", Helvetica, Arial,sans-serif;
    }
    .social-link {
        cursor: pointer;
    }
</style>
<body>
<script type="application/javascript">
    document.onload = function () {

    };


</script>

<div>
    <div>Login (on submit): </div>
    <form id="my-form">
        <input type="text" >
        <input type="password" >
        <input type="submit">
    </form>
</div>


<div class="social-link" onclick="facebookAuth()">Facebook</div>
<div class="social-link" data-xl-auth="sn-facebook">Facebook Another</div>
<div class="social-link" data-xl-auth="sn-wechat">WeChat</div>
<div class="social-link" data-xl-auth="sn-aiougame">AiouGame</div>
<div class="social-link" data-xl-auth="sn-google">Google</div>
<div class="social-link" data-xl-auth="sn-linkedin">LinkedIn</div>


<script type="application/javascript" >
    XL.init({
        projectId: '40db2ea4-5d42-11e6-a3ff-005056a0e04a',
        errorHandler: function (err) {
            console.error('Error: ', err);
        },
        isMarkupSocialsHandlersEnabled: true,
        redirectUrl:  window.location.host,
        loginUrl: 'http://127.0.0.1/login',
    });

    function facebookAuth() {
        XL.login({
            authType: 'sn-facebook'
        });
    }

    document.querySelector("#my-form").addEventListener("submit", function(e){
        e.preventDefault();    //stop form from submitting
        XL.login({
            authType: 'login-pass',
            login: '123',
            pass: '123',
            rememberMe: true
        },  function (data) {
            console.log(data);
        });
    });
</script>

</body>
</html>